<template>
	<view class="big-box flex-col align-center" id="dGoodsHomeId">
		<top-navigation :isFix='true' :isShow="true" bgColor='#BE2225' backIconColor='#FFF'>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="">

			<view class="car-select justify-start align-center">
				<view class="tips center">
					<x-img static src="/static/images/guest/tips.png" width="36rpx" height="32rpx"></x-img>
				</view>
				{{info.remind}}
			</view>
			<view class="order-info ">
				<view class="info-stys  flex-col align-start justify-center">

					<view class=" justify-start align-center">
						<view class="order-title-tag center">
							高铁贵宾厅
						</view>
						<view class="order-title-r">
							{{title}}
						</view>
					</view>
					<view class=" order-titles justify-start">
						<view v-for="(v,k) in info.tag" :key="k">{{v.title}}  
						<text style="margin: 0 20rpx;" v-if="k+1!=info.tag.length"> | </text>
						</view>
					</view>
				</view>


			</view>
			<view class="order-info">
				<view class="info-sty justify-between align-center">
					<view class="order-title">
						服务人次
					</view>
					<view class="order-content">
						<u-number-box integer bgColor='#ffffff00' v-model="info.people_num">
							<view slot="minus" class="minus">
								<u-icon name="minus" color="#FFFFFF" size="12"></u-icon>
							</view>
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
							</view>

						</u-number-box>
					</view>
				</view>
			</view>
			<view class="user-info" v-for='(v,k) in users' :key="k">
				<view class="user-title ">
					<view class="user-tits">
						用户信息{{users.length==1?'':k+1}}
					</view>
					<view class="line">

					</view>
				</view>
				<view class="user-sty justify-between align-center">
					<view class="user-tit">
						性别
					</view>
					<view class="tab-sex justify-between">
						<view class="tab-item center" @tap="users[k].sex=index" v-for="(item,index) in genderList"
							:style="{background:index==users[k].sex?'#CC1D1D':'#B9B9B9'}" :key="index">
							{{item.label}}
						</view>
					
					</view>
				</view>
				<view class="user-sty justify-between align-center border-t-b">
					<view class="user-tit">
						姓名*
					</view>
					<view class="user-con">
					
						<u-input v-model="users[k].user_name" placeholderStyle='color:#CC1D1D' inputAlign='right'
							class="info-box" fontSize='26rpx' placeholder="请填写姓名" border="none" clearable></u-input>
					</view>
				</view>
				<view class="user-sty justify-between align-center">
					<view class="user-tit">
						联系电话*
					</view>
					<view class="user-con">
					
						<u-input v-model="users[k].user_phone" placeholderStyle='color:#CC1D1D' inputAlign='right'
							class="info-box" fontSize='26rpx' placeholder="请填写联系电话" border="none" clearable></u-input>
					</view>
				</view>
			</view>
			<view class="user-info">
				<view class="user-title ">
					<view class="user-tits">
						车次信息
					</view>
					<view class="line">

					</view>
				</view>
				<view class="user-sty justify-between align-center">
					<view class="user-tit">
						车次号
					</view>
					<view class="user-con">

						<u-input v-model='info.flight_num' placeholderStyle='color:#8E8E8E' inputAlign='right' class="info-box" fontSize='26rpx'
							placeholder="请填写车次" border="none" clearable></u-input>
					</view>
				</view>
			</view>
			<uni-datetime-picker type="datetime" v-model="info.usage_time"  :start='getStartTime' hide-second>
			<view class="user-info">
				<view class="user-title ">
					<view class="user-tits">
						选择预约时间
					</view>
					<view class="line-time">
			
					</view>
				</view>
			
				<view class=" user-sty border-t justify-between align-center mt-30" style="height: 108rpx;">
					<view class="user-tit">
						
						{{ info.usage_time || '点击选择预约时间'}}
					</view>
					<view class="user-con">
						<!-- <u-input placeholderStyle='color:#CC1D1D' inputAlign='right' class="info-box" fontSize='26rpx'
							placeholder="请填写联系电话" border="none" clearable></u-input> -->
					</view>
				</view>
			</view>
			</uni-datetime-picker>
			<view class="remark">
				<view class="user-title ">
					<view class="user-tits">
						备注信息
					</view>
					<view class="line">

					</view>
				</view>
				<view class="remark-con">
					<u-textarea height='102rpx' border='none' v-model="info.notes" placeholder="请输入备注"></u-textarea>
				</view>
			</view>
		</view>

		<bottom-nav @pay='applyOrder' :loading="moneyLoading" :money="getMoney"></bottom-nav>

	</view>
</template>

<script>
	import {
genderList
	} from '@/utils/constants.js'
	import {
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				id: null,
				moneyLoading: true,
				info: {
					people_num:1,
					notes:'',
					flight_num:'',
					tag:[]
				},
				users: [{
					sex: 0,
					user_name: "",
					user_phone: "",
				}, ],
				gender: 0,
				selectMaxTime:0,
				genderList: genderList,
title:'',

			}

		},
		computed: {
			getMoney() {
				return (+this.info.price * this.info.people_num).toFixed(2)
			},
			calculateStatusBar() {
				return `${this.statusHeight}px`;
			},
			tabsHeight() {
				return `calc(354rpx + (${this.deviceModel?parseInt(this.statusHeight)/2+'rpx':'0rpx'}))`;
			},
			getStartTime(){
				return this.$moment().add(this.selectMaxTime, 'hours').format('YYYY-MM-DD HH:mm')
			}

		},
		onLoad(o) {
			this.id = o.id || null
			this.title = o.title || null
			this.getVipRoomInfo()
		},
		watch: {
			'info.people_num': {
				handler(newVal) {
					if (+newVal > this.users.length) {
						for (let i = 0; i < +newVal - this.users.length; i++) {
							this.users.push({
								sex: 0,
								user_name: "",
								user_phone: "",
							})
						}
					}else if(+newVal < this.users.length){
						this.users.pop()
					}
				}
			}
		},
		onShow() {

		},
		methods: {
			...mapActions(['getTrainRoomDetailSome', 'getTrainApplyOrder']),
			async getVipRoomInfo() {
				let res = await this.getTrainRoomDetailSome({
					id: this.id
				})
				this.info = {...this.info,...res}
				this.selectMaxTime = +this.info.delay_hours
				this.moneyLoading = false
			},
			async applyOrder() {
				let _this = this
				wx.login({
					async success(res) {
						if (res.code) {
							console.log(res.code);
							let content = {
								..._this.info,
								users: _this.users,
								"price": _this.getMoney
							}
							let data = {
								code: res.code, //	是	string	微信获取code
								type: 'viplounge', //	是	string	viplounge
								type_id: _this.id, //	是	机场id
								content_id: '5', //	是	string	传 5
								price: _this.getMoney, //	是	string	价格
								// pay_type	否	string	支付方式:0=积分,1=微信,2=权益卡
								content: JSON.stringify(content), //	是	string	预订信息json
							}
							//发起网络请求
							let resq = await _this.getTrainApplyOrder(data)
							_this.$navto('/trainvip/order/order-detail?order_id=' + resq.order_id +
								'&place=1')
						} else {
							uni.$toast('下单失败,请重试')
						}
					}
				})
				return
				this.$navto('/guest/order/order-status')
			},
			foodPay() {
				this.$navto('/trainvip/order/order-status')
			}
		},
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		width: 100vw;
		padding: 0 0 250rpx 0;
		min-height: 100vh;
		background: rgba(243, 243, 243, 0.95);

		.car-select {
			margin: 41rpx 0 0 0rpx;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #CC1D1D;

			.tips {
				width: 57rpx;
				height: 57rpx;
				background: #FFF;
				border-radius: 50%;
				margin-right: 16rpx;
				box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);
			}
		}

		.order-info {
			margin: 21rpx 0 25rpx;
			width: 670rpx;
			padding: 0 33rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(108, 108, 108, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.order-title-one {
				width: 112rpx;
				margin-right: 49rpx;

				.order-tag {
					width: 82rpx;
					height: 44rpx;
					background: #D83F3F;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}

			.info-sty {
				height: 90rpx;
			}

			.order-title-r {

				font-size: 32rpx;
				color: #000000;
				line-height: 32rpx;

			}

			.order-title-tag {
				padding: 0 15rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				height: 44rpx;
				background: #D83F3F;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin-right: 50rpx;
			}

			.info-stys {
				height: 145rpx;
			}

			.order-title {
				width: 112rpx;
				margin-right: 49rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #8E8E8E;
			}

			.order-titles {
				margin: 23rpx 0 0 0;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #8E8E8E;
			}

			.order-content {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;

				.minus {
					width: 38rpx;
					height: 38rpx;
					background-color: #FFAAAA;
					border-top-left-radius: 100px;
					border-top-right-radius: 100px;
					border-bottom-left-radius: 100px;
					border-bottom-right-radius: 100px;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.input {
					padding: 0 10px;
				}

				.plus {
					width: 38rpx;
					height: 38rpx;
					background-color: #C73636;
					border-radius: 50%;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					justify-content: center;
					align-items: center;
				}
			}
		}

		.user-title {
			margin-bottom: 9rpx;
			width: max-content;
			position: relative;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			z-index: 1;

			.line {
				position: absolute;
				bottom: -2rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 147rpx;
				height: 6rpx;
				background: linear-gradient(180deg, #FFFFFF 3%, #F2DCBE 24%, #CF9952 91%);
				border-radius: 0rpx 10rpx 0rpx 10rpx;
			}

			.line-time {
				position: absolute;
				bottom: -2rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 219rpx;
				height: 6rpx;
				background: linear-gradient(180deg, #FFFFFF 3%, #F2DCBE 24%, #CF9952 91%);
				border-radius: 0rpx 10rpx 0rpx 10rpx;
			}

			.user-tits {
				position: relative;
				z-index: 2;
			}

			.timeout {
				width: max-content;
				position: absolute;
				left: 0;
				bottom: 0;
				transform: translateX(105%);
				font-weight: 400;
				font-size: 28rpx;
				color: #8E8E8E;

			}


		}

		.user-info {
			margin-bottom: 25rpx;
			padding: 32rpx 30rpx 0;
			width: 670rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(108, 108, 108, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.line {
				position: absolute;
				bottom: -2rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 147rpx;
				height: 6rpx;
				background: linear-gradient(180deg, #FFFFFF 3%, #F2DCBE 24%, #CF9952 91%);
				border-radius: 0rpx 10rpx 0rpx 10rpx;
			}


			.border-t-b {
				border-top: 1rpx solid rgba(0, 0, 0, 0.1);
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			}

			.user-sty {
				height: 90rpx;

				.user-tit {
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #8E8E8E;
				}

				.tab-sex {
					width: 194rpx;
					height: 57rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					overflow: hidden;

					.tab-item {
						height: 57rpx;
						line-height: 57rpx;
						font-family: Source Han Sans SC, Source Han Sans SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #FFFFFF;
						flex: 1;

					}
				}

				.user-con {
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #CC1D1D;
				}
			}
		}

		.remark {
			padding: 32rpx 30rpx 0;
			width: 670rpx;
			height: 222rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(108, 108, 108, 0.1);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.remark-con {
				// padding: 19rpx 21rpx;
				// margin-top: 20rpx;
				width: 610rpx;
				background: #F0F0F0;
				box-shadow: inset 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}
		}




	}
</style>